<template>
  <view>
    
    <!-- 搜索框 -->
    <view class="search" :style="{'background-color': bgcolor}">
      
      <view class="search-item" :style="{'border-radius':radius+'px'}" @click="Search">
        <uni-icons type="search" size="17"></uni-icons>
        <text>搜索</text>
      </view>      
      
    </view>
    
    
  </view>
</template>

<script>
  export default {
    name:"my-search",
    props:{//自定义属性
      bgcolor:{
        type:String,
        default:"#aa0000"
      },
      radius:{
        type:Number,
        default:20
      }
    },
    data() {
      return {
        
      };
    },
    onLoad() {
      
    },
    methods:{
      Search(){
        this.$emit("click")//获取调用此组件的事件
      }
    }
  }
</script>

<style lang="scss">
  .search{
    // background-color: #aa0000;
    height: 90rpx;
    display:flex;
    flex-direction:column; // 改变主轴方向
    justify-content:center; // 定义主轴的对齐方式
    .search-item{
      // border-radius: 20rpx;
      background-color: white;
      margin: 0rpx 25rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      border: 1px solid white;
    }
  }
</style>